<template>
  <div class="chart-item row1-right">
    <div class="chart-header">
      <h3>器具超时列表</h3>
      <div class="filter-selector">
        <el-select v-model="selectedStatus" size="small" @change="handleStatusChange">
          <el-option label="全部" value="all"></el-option>
          <el-option label="在库超时" value="instock"></el-option>
          <el-option label="在途超时" value="intransit"></el-option>
        </el-select>
      </div>
    </div>
    <div class="timeout-list">
      <div
        v-for="(container, index) in filteredContainers"
        :key="container.id"
        class="timeout-item"
      >
        <div class="status-indicator" :class="container.status">
          <i :class="getStatusIcon(container.status)"></i>
        </div>
        <div class="container-info">
          <div class="container-code">{{ container.code }}</div>
          <div class="container-location">{{ container.location }}</div>
        </div>
        <div class="timeout-info">
          <div class="timeout-days" :class="getTimeoutLevel(container.timeoutDays)">
            {{ container.timeoutDays }}天
          </div>
          <div class="timeout-label">超时</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ContainerTimeoutList',
  props: {
    timeoutContainers: {
      type: Array,
      default: () => [
        { id: 1, code: 'CT001234', location: '华东仓库A区', status: 'instock', timeoutDays: 15 },
        { id: 2, code: 'CT001235', location: '运输途中-上海', status: 'intransit', timeoutDays: 8 },
        { id: 3, code: 'CT001236', location: '华南仓库B区', status: 'instock', timeoutDays: 22 },
        { id: 4, code: 'CT001237', location: '运输途中-北京', status: 'intransit', timeoutDays: 12 },
        { id: 5, code: 'CT001238', location: '华北仓库C区', status: 'instock', timeoutDays: 5 },
        { id: 6, code: 'CT001239', location: '运输途中-广州', status: 'intransit', timeoutDays: 18 },
        { id: 7, code: 'CT001240', location: '西南仓库D区', status: 'instock', timeoutDays: 30 }
      ]
    }
  },
  data() {
    return {
      selectedStatus: 'all'
    }
  },
  computed: {
    filteredContainers() {
      if (this.selectedStatus === 'all') {
        return this.timeoutContainers
      }
      return this.timeoutContainers.filter(container => container.status === this.selectedStatus)
    }
  },
  methods: {
    getStatusIcon(status) {
      const iconMap = {
        'instock': 'el-icon-house',
        'intransit': 'el-icon-truck'
      }
      return iconMap[status] || 'el-icon-box'
    },

    getTimeoutLevel(days) {
      if (days >= 20) return 'severe'
      if (days >= 10) return 'warning'
      return 'normal'
    },

    handleStatusChange(status) {
      this.$emit('status-change', status)
    }
  }
}
</script>

<style lang="scss" scoped>
/* 组件特有样式 */
.filter-selector {
  ::v-deep .el-select {
    width: 100px;
  }
}

.timeout-list {
  max-height: 280px;
  overflow-y: auto;

  .timeout-item {
    display: flex;
    align-items: center;
    padding: 12px 8px;
    border-bottom: 1px solid #f0f0f0;
    transition: background-color 0.2s;

    &:hover {
      background-color: #f8f9fa;
    }

    &:last-child {
      border-bottom: none;
    }

    .status-indicator {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 12px;

      &.instock {
        background: rgba(103, 194, 58, 0.1);
        i { color: #67c23a; }
      }

      &.intransit {
        background: rgba(64, 158, 255, 0.1);
        i { color: #409eff; }
      }
    }

    .container-info {
      flex: 1;

      .container-code {
        font-size: 14px;
        font-weight: 500;
        color: #303133;
        margin-bottom: 4px;
      }

      .container-location {
        font-size: 12px;
        color: #666;
      }
    }

    .timeout-info {
      text-align: center;

      .timeout-days {
        font-size: 16px;
        font-weight: bold;
        margin-bottom: 2px;

        &.normal {
          color: #67c23a;
        }

        &.warning {
          color: #e6a23c;
        }

        &.severe {
          color: #f56c6c;
        }
      }

      .timeout-label {
        font-size: 10px;
        color: #999;
      }
    }
  }
}

// 滚动条样式
.timeout-list::-webkit-scrollbar {
  width: 4px;
}

.timeout-list::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 2px;
}

.timeout-list::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 2px;
}

.timeout-list::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}
</style>
